<template>
  <div id="app">
    <router-view/>
    <router-view name='Foot'></router-view>   
  </div>
</template>
<script>


export default {
  components: {
  
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
}
body,
html,
#app {
  height: 100%;
}
#app {
  display: flex;
  flex-direction: column;
  /* border: 1px solid red; */
}
html {
  font-size: 26.67vw;
}
body {
  font-size: 16px;
}
#app .footer {
  height: 0.44rem;
  background: rgb(237, 237, 227);
}
#app .footer ul{
  height: .44rem;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
#app .box {
  flex: 1;
  overflow-y: auto;
  /* border: 1px solid rgb(72, 78, 186); */
  display: flex;
  flex-direction: column;
}
#app .box .header {
  height: 0.44rem;
  background-color: rgb(223, 23, 33);
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#app .box .main {
  background: #eee;
  flex: 1;
  overflow-y: auto;
}
</style>
